import React, { useEffect, useState } from 'react'
import store from '../store'

// 获取reducer 函数返回值
console.log(store.getState())

const Child1 = () => {
    
    const [name,setName] = useState(store.getState().name)
    useEffect(() => {
        // 监听store 数据改变时 执行此函数
        // store.subscribe 会返回一个清除监听的函数
        const unSubscribe = store.subscribe(() => {
            console.log('组件1的监听')
            setName(store.getState().name)
        })

        return () => {
            // 组件销毁时 清除store的监听
            unSubscribe()
        }

    },[])

  return (
    <div>
        <h1>Child1</h1>
        <p>姓名:{name}</p>
        <button onClick={() => {
            // dispatch派发一个action对象,会触发reducer函数的调用
            //action是一个对象 至少有一个type属性
            //type属性是一个字符串 用来描述当前的action对象的类型
            store.dispatch({
                type:'Type_name',
                // payload:Math.random() + '小红'
            })
        }}>修改姓名</button>
    </div>
  )
}

export default Child1